<template>
	<view>
		<block>
			<view class="" style="background-color: #F5F6F8;height:180vh">
				<view class="head_title">
					<image :src="baseUrl+'assets/static/re_bg.png'" mode="" class="creatBg"></image>
					<!-- <image :src="baseUrl+'assets/static/fail.png'" class="ele_icon2" v-if="isOut==0" /> -->
				</view>
				<view class="repair_main">
					<view class="repair_title">
						<text class="ful_left">工单ID：</text>
						<text class="ful_right">{{detail_.workID}}</text>
					</view>
					<view class="same_ful" v-if="detail_.service_type == '保养'" style="margin-top: 10rpx;">
						<view class="ful_left">报告名称</view>
						<view class="ful_right">{{detail_.pinpai.name}}{{service_default}}服务报告</view>
					</view>
					<view class="same_ful">
						<view class="ful_left">日期</view>
						<view class="ful_right">{{detail_.time}}</view>
					</view>
					<view class="same_ful">
						<view class="ful_left">客户名称</view>
						<view class="ful_right">{{detail_.name}}</view>
					</view>

					<view class="same_ful">
						<view class="ful_left">类别</view>
						<view class="ful_right">{{detail_.pinpai.name||'暂无'}}</view>
					</view>
					<view class="same_ful">
						<view class="ful_left">品牌</view>
						<view class="ful_right">{{detail_.leibie.name||'暂无'}}</view>
					</view>

					<view class="same_ful">
						<view class="ful_left">型号</view>
						<view class="ful_right">{{detail_.xinghao.name||'暂无'}}</view>
					</view>
					<!-- <view class="same_ful">
						<view class="ful_left">保养级别</view>
						<view class="ful_right">{{service_default||'暂无'}}</view>
					</view> -->
					<view class="same_ful">
						<view class="ful_left">序列号</view>
						<view class="ful_right">{{detail_.serial||'暂无'}}</view>
					</view>
					<view class="same_ful">
						<view class="ful_left">质保期</view>
						<view class="ful_right">{{detail_.qa_time||'暂无'}}</view>
					</view>
					<view class="same_ful">
						<view class="ful_left">合同类型</view>
						<view class="ful_right">{{detail_.warranty_type == 1?'单次维修':'单次保养'}}</view>
					</view>
					<view class="same_ful">
						<view class="ful_left">设备合同状态</view>
						<view class="ful_right">{{detail_.contract_status||'暂无'}}</view>
					</view>
					<view class="title_">
						保养工单详情
					</view>
					<cora :isPdf='true' :arrList="arrList" v-if="typeData=='MRI'&&service_default=='A级保养'"></cora>
					<corb :isPdf='true' :arrList="arrList" v-if="typeData=='MRI'&&service_default=='B级保养'"></corb>
					<cta :isPdf='true' :arrList="arrList" v-if="typeData=='CT'&&service_default=='A级保养'"></cta>
					<ctb :isPdf='true' :arrList="arrList" v-if="typeData=='CT'&&service_default=='B级保养'"></ctb>
					<dra :isPdf='true' :arrList="arrList" v-if="typeData=='DR'&&service_default=='A级保养'"></dra>
					<drb :isPdf='true' :arrList="arrList" v-if="typeData=='DR'&&service_default=='B级保养'"></drb>
					<dsa :isPdf='true' :arrList="arrList" v-if="typeData=='DSA'&&service_default=='A级保养'"></dsa>
					<dsb :isPdf='true' :arrList="arrList" v-if="typeData=='DSA'&&service_default=='B级保养'"></dsb>
					<smallc :isPdf='true' :arrList="arrList" v-if="typeData=='小C'"></smallc>
					<wave :isPdf='true' :arrList="arrList" v-if="typeData=='超声'"></wave>
					<wca :isPdf='true' :arrList="arrList" v-if="typeData=='DR/F'&&service_default=='A级保养'"></wca>
					<wcb :isPdf='true' :arrList="arrList" v-if="typeData=='DR/F'&&service_default=='B级保养'"></wcb>
					<view class="title_">
						服务信息
					</view>
					<view class="two_">
						<view class="two_left">
							<view class="left_icon" />
							工程师到达时间
						</view>
						<view class="two_right">
							{{detail_.present_time || '无'}}
						</view>
					</view>
					<view class="border_" />
					<view class="two_">
						<view class="two_left">
							<view class="left_icon" />
							保养记录
						</view>
						<view class="two_right" @click="editInfo('repair_record', '维修服务记录')">
							{{detail_.repair_record || '-'}}<uni-icons v-if="!detail_.image&&isOut==0" type="compose"
								size="16" />
						</view>
					</view>
					<view class="border_" />
					<view class="title_" v-if="detail_.images && detail_.images.length != 0">
						保养照片
					</view>
					<view v-if="detail_.images && detail_.images.length != 0" class="content_">
						<view class="content_imgs">
							<image :src="i" v-for="(i,l) in detail_.images" :key='l'
								@click="previewImageAll(l, detail_.images)" mode="aspectFill" />
						</view>
					</view>
					<view class="title_" style="width: 240rpx;">
						保养结果及建议
					</view>
					<view class="two_">
						<view class="two_right" @click="editInfo('ending', '维修结果及建议')">
							{{detail_.ending || '无'}} <uni-icons v-if="!detail_.image&&isOut==0" type="compose"
								size="16" />
						</view>
					</view>
					<view class="border_">
					</view>
					<view class="sign_ture" :style="{ paddingTop: canvas_show ? '1200rpx' : '32rpx' }">
						<view class="sign_ture_user" @tap="handleSign('handWriting2')">
							<view class="title" v-if="detail_.image">
								客户签字一
							</view>
							<view class="title2" v-if="!detail_.image">
								客户签字一(点击代签字)
							</view>
							<image v-if="detail_.image" :src="detail_.image"
								style="width: 100%; height: 100%; z-index: 99;" mode="aspectFit" />
							<canvas v-if="!detail_.image" style="width: 100%; height: 183rpx;"
								canvas-id="handWriting2" />
						</view>
						<view class="sign_ture_user" @tap="handleSign('handWriting3')">
							<view class="title" v-if="detail_.image1">
								客户签字二
							</view>
							<view class="title2" v-if="!detail_.image1">
								客户签字二(点击代签字)
							</view>
							<image v-if="detail_.image1" :src="detail_.image1"
								style="width: 100%; height: 100%; z-index: 99;" mode="aspectFit" />
							<canvas v-if="!detail_.image1" style="width: 100%; height: 183rpx;"
								canvas-id="handWriting3" />
						</view>
						<view class="sign_ture_engineer">
							<view class="title">
								工程师签字
							</view>
							{{detail_.nickname||'-'}}
						</view>
					</view>
					<view class="border_">
					</view>
					<view class="cont_">
						备注：本函仅针对该工单所反馈问题做确认操作，签字后该工单即变更为完结状态，如有其他问题请重新发起报修，谢谢
					</view>
					<!-- <view class="submit" v-if="isOut==0" @tap="submit"
						:style="{color:detail_.image&&detail_.image1?'#1a66ff!important':'',backgroundColor:detail_.image&&detail_.image1?'#f5f6f8!important':''}">
						{{detail_.image&&detail_.image1?'已提交':'提交'}}
					</view>
					<view class="getPoster">
						<button class="btn-big"
							style="margin: 15px 0;background: #1A66FF;color: #fff;width: 100%;padding: 5px;" size="mini"
							@tap="down" v-if="detail_.image||detail_.image1">生成图片</button>
					</view> -->
					<view class="btn">
						<view class="getPoster" @tap="reviewPdf(detail_.report_other)">下载PDF</view>
						<view class="submit" @tap="submit" v-if="is_scan_code==0||(is_scan_code==1&&isOut==0)"
							:style="{color:detail_.image&&detail_.image1?'#1a66ff!important':'',backgroundColor:detail_.image&&detail_.image1?'#f5f6f8!important':''}">
							{{detail_.image&&detail_.image1?'已提交':'提交'}}
						</view>
					</view>
				</view>
			</view>
		</block>
		<view class="wrapper" v-if="canvas_show">
			<view class="handBtn" @touchmove.stop.prevent=""> 
				<button @click="retDraw" class="delBtn">重写</button>
				<button @click="closeDraw" class="closeBtn">关闭</button>
				<button @click="subCanvas" class="subBtn">完成</button>
			</view>
			<view class="handCenter">
				<view class="Right" v-if="!isStart">
					<view class="handTitle">请用正楷书写</view>
				</view>
				<canvas class="handWriting" disable-scroll @touchstart="uploadScaleStart" @touchmove="uploadScaleMove"
					canvas-id="handWriting" />
			</view>
			<view class="handRight" @touchmove.stop.prevent="">
				<view class="handTitle">请签名</view>
			</view>
		</view>
		<uni-popup ref="editRef" type="center" @maskClick="closeEdit">
			<view class="popup-box">
				<view class="popup-title">{{fieldTitle}}</view>
				<textarea v-model="editContent" placeholder="请输入..." maxlength="140" />
				<view class="popup-btn">
					<button @click="closeEdit">取消</button>
					<button type="primary" @click="saveEdit">保存</button>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="code" type="center" @maskClick="closeEdit">
			<view class="popup-box">
				<view class="wx-Logo login">
					<view class="container">
						<view class="">
							<view class="title_t">
								<image src="../../static/logo.png" mode="" class="creatBg"></image>
								<view class="">九键医疗 申请使用</view>
							</view>
							<view class="title_bold">您的微信头像、昵称、手机号信息</view>
							<view class="title_small">请点击下方获取个人信息进行授权</view>
							<view class="choose-avatar-row">
								<button :disabled="showUrl" class="avatar-wrapper" open-type="chooseAvatar"
									@chooseavatar="onChooseAvatar">
									<image class="avatar" :src="showUrl"></image>
								</button>
								<button :disabled="showUrl" class="avatar-wrapper2" open-type="chooseAvatar"
									@chooseavatar="onChooseAvatar"
									style="color: #807E7E;border: none;font-size: 28rpx;text-align: left;">
									<text v-if="!showUrl" class="u-button__text">点击获取头像</text>
									<image v-if="!showUrl" src="../../static/icon2.png" mode=""
										style="margin-left: 306rpx;"></image>
								</button>
							</view>
							<view class="choose-nickname-row">
								<text style="color: #000;margin-right: 50rpx;">昵称</text>
								<input v-model="nickname" :disabled="nickname" type="nickname" placeholder="点击获取昵称"
									style="color: #807E7E;" class='codeinput' />
								<image v-if="!nickname" src="../../static/icon2.png" mode=""
									style="margin-left: 138rpx;"></image>
							</view>
							<view class="choose-nickname-row">
								<text style="color: #000;margin-right: 10rpx;">手机</text>
								<button :disabled="phone" class="avatar-wrapper2" open-type="getPhoneNumber"
									@getphonenumber="decryptPhoneNumber" @tap="decryptPhoneNumber"
									style="color: #807E7E;border: none;font-size: 28rpx;text-align: left;">
									<text class="u-button__text">{{phone||'点击获取手机号'}}</text>
									<image v-if="!phone" src="../../static/icon2.png" mode=""
										style="margin-left: 254rpx;"></image>
								</button>
							</view>
							<!-- <button class="login-btn" :disabled="btn" type="default" open-type="getPhoneNumber"
								@getphonenumber="decryptPhoneNumber" @tap="decryptPhoneNumber">一键获取手机号</button> -->
						</view>
					</view>
				</view>
				<view class="popup-btn2">
					<button type="primary" @click="saveCode">确定</button>
					<button @click="closeCode">取消</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import baseUrl from '@/request/baseUrl.js'
	import cta from "@/components/model/CTA.vue"
	import ctb from "@/components/model/CTB.vue"
	import dra from "@/components/model/DRA.vue"
	import drb from "@/components/model/DRB.vue"
	import cora from "@/components/model/CORA.vue"
	import corb from "@/components/model/CORB.vue"
	import dsa from "@/components/model/DSA.vue"
	import dsb from "@/components/model/DSB.vue"
	import wca from "@/components/model/WCA.vue"
	import wcb from "@/components/model/WCB.vue"
	import smallc from "@/components/model/SMALLC.vue"
	import wave from "@/components/model/WAVE.vue"

	import {
		mapMutations
	} from 'vuex'
	export default {
		components: {
			dra,
			drb,
			cta,
			ctb,
			cora,
			corb,
			dsa,
			dsb,
			wca,
			wcb,
			smallc,
			wave
		},
		data() {
			return {
				baseUrl: baseUrl,
				canvasName: 'handWriting2',
				ctx: '',
				startX: null,
				isStart:false,
				startY: null,
				typeData: '',
				canvasWidth: 0,
				canvasHeight: 0,
				selectColor: 'black',
				lineColor: '#1A1A1A', // 颜色
				lineSize: 5, // 笔记倍数
				canvas_show: false, //画布显示
				imgSrc1: '', //签名数据
				imgSrc2: '', //签名数据
				user_photo: '', // 签字人拍照
				user_photo2: '', // 签字人拍照
				warranty_id: null, //工单id
				service_id: null, //维修id
				report_id: null, //维修报告id
				detail_: {}, //页面详情
				reportImg: '', // 已生成报告图片
				field: '', // 修改字段
				fieldTitle: '', // 修改字段标题
				editContent: '', // 修改内容
				is_scan_code: 0,
				domId: '',
				avatarUrl: '', //头像
				showUrl: "",
				phone: '',
				nickname: '',
				isOut: 1,
				arrList: [],
				service_default: ''
			}
		},
		onShow() {
			if (this.is_scan_code == 1) {
				this.checkCode()
			} else {
				this.getdata()
			}
		},

		onLoad(e) {
			console.log('-----------onLoad-----------')
			if (e.q) {
				this.checkCode()
				let res = decodeURIComponent(e.q)
				let result = this.GetRequest(res)
				this.service_id = result.service_id
				this.report_id = result.report_id
				this.is_scan_code = result.is_scan_code

				if (this.is_scan_code == 1 && this.phone == '') {
					this.clearCode()
					// this.myCache('sqInfo')
					setTimeout(() => {
						this.$refs.code.open();
					}, 0)
					return
				}
			} else {
				this.warranty_id = e.warranty_id
				this.service_id = e.service_id
				this.report_id = e.report_id
				this.getdata()
			}

			this.ctx = uni.createCanvasContext("handWriting");
			this.$nextTick(() => {
				uni.createSelectorQuery().select('.handCenter').boundingClientRect(rect => {
						this.canvasWidth = rect.width;
						this.canvasHeight = rect.height;
						this.setCanvasBg('#fff');
					})
					.exec();
			});
		},
		methods: {
			checkCode() {
				this.$https.post('/Warranty/is_expire', {
					report_id: this.report_id
				}).then(res => {
					this.isOut = res.data
					if (this.isOut == 1) {
						uni.showToast({
							title: '二维码已过期！',
							icon: 'error'
						})
						return
					} else {
						this.getdata()
					}
				})
			},
			decryptPhoneNumber(e) {
				if (e.detail.code) {
					this.$https.post('/user/getWxPhone', {
						code: e.detail.code
					}).then(res => {
						this.phone = res.data;
					})
				}
				// let uids = uni.getStorageSync('UID');

			},
			// 选择头像
			async onChooseAvatar(e) {
				let {
					avatarUrl
				} = e.detail

				let getavatarUrl = await this.uploadFilePromise(avatarUrl)
				this.avatarUrl = getavatarUrl.url
				this.showUrl = getavatarUrl.showUrl

			},
			// // 上传头像图片到服务器
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: `${this.baseUrl}api/common/upload`, // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test',
						},
						success: (res) => {
							setTimeout(() => {
								resolve({
									url: JSON.parse(res.data).data.url,
									showUrl: JSON.parse(res.data).data.fullurl,
								})
							}, 1000)
						},
						fail(fails) {
							console.log(fails, 'fail')
						}
					});
				})
			},
			GetRequest(params) {
				let url = params.substring(params.indexOf("?")); //获取url中"?"符后的字串
				let theRequest = new Object();
				if (url.indexOf("?") != -1) {
					let str = url.substr(1);
					let strs = str.split("&");
					for (let i = 0; i < strs.length; i++) {
						theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
					}
				}
				return theRequest;
			},
			...mapMutations(['setReportDetail']),
			down() {
				uni.navigateTo({
					url: '/pages/share/share?id=' + this.report_id + '&reportImg=' + this.reportImg,
				});
			},
			// 签字
			handleSign(domId) {
				this.domId = domId
				console.log('this=============', this.is_scan_code)
				if (this.isOut == 1 && this.is_scan_code == 1) return
				if (domId == 'handWriting2' && this.detail_.image) return;
				if (domId == 'handWriting3' && this.detail_.image1) return;


				this.canvasName = domId;
				if ((domId == 'handWriting2' && this.user_photo) || (domId == 'handWriting3' && this.user_photo2)) {
					this.canvas_show = true;
				} else {
					if (this.is_scan_code != 1) {
						uni.chooseLocation({
							success: (openRes) => {
								uni.chooseMedia({
									count: 1,
									mediaType: ['image'],
									sourceType: ['camera'],
									camera: 'front',
									success: async (res) => {
										console.log(openRes.address + openRes.name, '：地址')
										let filePath = res.tempFiles[0].tempFilePath;
										let path = await this.uploadImage(filePath, openRes.address +
											openRes.name);
										if (domId == 'handWriting2') this.user_photo = path;
										if (domId == 'handWriting3') this.user_photo2 = path;
										if (!this.ctx || this.ctx == '') {
											this.ctx = uni.createCanvasContext("handWriting");
											this.$nextTick(() => {
												uni.createSelectorQuery().select('.handCenter')
													.boundingClientRect(rect => {
														this.canvasWidth = rect.width;
														this.canvasHeight = rect.height;
														this.setCanvasBg('#fff');
													})
													.exec();
											});
										}
										this.canvas_show = true;
									}
								})
							},
							fail: (err) => {
								console.log('err', err);
							}
						});
					}else {
						if (!this.ctx || this.ctx == '') {
							this.ctx = uni.createCanvasContext("handWriting");
							this.$nextTick(() => {
								uni.createSelectorQuery().select('.handCenter')
									.boundingClientRect(rect => {
										this.canvasWidth = rect.width;
										this.canvasHeight = rect.height;
										this.setCanvasBg('#fff');
									})
									.exec();
							});
						}
						this.canvas_show = true;
					}
				}
			},
			// 笔迹开始
			uploadScaleStart(e) {
				console.log(this.startX,'----this.startX',this.domId)
				this.startX = e.changedTouches[0].x
				this.startY = e.changedTouches[0].y
				//设置画笔参数
				this.ctx.setStrokeStyle(this.lineColor)
				this.ctx.setLineWidth(this.lineSize)
				//设置线条的结束端点样式
				this.ctx.setLineCap("round") //'butt'、'round'、'square'
				this.ctx.beginPath()
			},
			// 笔迹移动
			uploadScaleMove(e) {
				this.isStart = true
				let temX = e.changedTouches[0].x
				let temY = e.changedTouches[0].y
				this.ctx.moveTo(this.startX, this.startY)
				this.ctx.lineTo(temX, temY)
				this.ctx.stroke()
				this.startX = temX
				this.startY = temY
				this.ctx.draw(true)
			},
			/**
			 * 重写
			 */
			retDraw() {
				this.ctx.clearRect(0, 0, 700, 730);
				this.ctx.draw();
				this.setCanvasBg('#fff');
			},
			/**
			 * 选择颜色
			 */
			selectColorEvent(str, color) {
				this.selectColor = str;
				this.lineColor = color;
			},
			// 关闭弹窗
			closeDraw() {
				this.canvas_show = false;
				this.isStart = false
			},
			//完成
			subCanvas() {
				this.isStart = false
				uni.canvasToTempFilePath({
					canvasId: 'handWriting',
					fileType: 'png',
					quality: 1, //图片质量
					success: (res) => {
						console.log(res.tempFilePath)
						uni.getImageInfo({
							src: res.tempFilePath,
							success: (res1) => {

								let canvasContext = uni.createCanvasContext(this.canvasName)
								let rate = res1.height / res1.width
								let width = 200 / rate
								let height = 500
								canvasContext.scale(0.7, 1);
								canvasContext.translate(height / 2, width / 2)
								canvasContext.rotate((270 * Math.PI) / 180)
								canvasContext.drawImage(res.tempFilePath, -width / 2, -height / 2,
									width, height)
								console.log(width, 'res1---------', height)
								canvasContext.draw(false, () => {
									uni.canvasToTempFilePath({
										canvasId: this.canvasName,
										fileType: 'png',
										quality: 1, //图片质量
										success: (res2) => {
											console.log(res2.tempFilePath)
											if (this.canvasName ==
												'handWriting2') {
												this.imgSrc1 = res2
													.tempFilePath
											} else {
												this.imgSrc2 = res2
													.tempFilePath
											}
											this.canvas_show = false;
										}
									})
								})
							}
						})
					}
				});
			},
			//保存到相册
			saveCanvasAsImg() {
				uni.canvasToTempFilePath({
					canvasId: 'handWriting',
					fileType: 'png',
					quality: 1, //图片质量
					success: (res) => {
						console.log(res.tempFilePath, 'canvas生成图片地址');
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: (res) => {
								uni.showToast({
									title: '已保存到相册',
									duration: 2000
								});
							}
						});
					}
				});
			},
			//预览
			previewCanvasImg() {
				uni.canvasToTempFilePath({
					canvasId: 'handWriting',
					fileType: 'jpg',
					quality: 1, //图片质量
					success: (res) => {
						uni.previewImage({
							urls: [res.tempFilePath] //预览图片 数组
						});
					}
				});
			},
			/* 图片预览 */
			previewImageAll(current, urls) {
				uni.previewImage({
					current,
					urls
				})
			},
			// 编辑信息
			editInfo(field, title) {
				if (!this.detail_.image) {
					this.field = field;
					this.fieldTitle = title;
					this.editContent = this.detail_[field];
					this.$refs.editRef.open();
				}
			},
			// 关闭编辑
			closeEdit() {
				this.$refs.editRef.close();
				setTimeout(() => {
					this.field = '';
					this.fieldTitle = '';
					this.editContent = '';
				}, 500);
			},
			// 关闭编辑
			closeCode() {
				uni.navigateTo({
					url: '/pages/home/index'
				})
			},
			clearCode() {
				this.avatarUrl = '';
				this.showUrl = '';
				this.phone = '';
				this.nickname = '';
			},
			// 保存编辑
			saveCode() {
				if (this.avatarUrl == '') {
					uni.showToast({
						title: '请上传头像',
						icon: 'none'
					});
					return
				}
				if (this.nickname == '') {
					uni.showToast({
						title: '请填写昵称',
						icon: 'none'
					});
					return
				}
				if (this.phone == '') {
					uni.showToast({
						title: '手机号不能为空',
						icon: 'none'
					});
					return
				}
				let sqInfo = {
					phone:this.phone,
					nickname: this.nickname,
					avatarUrl: this.avatarUrl
				}
				this.myCache('sqInfo',sqInfo,20)
				this.$refs.code.close();
			},
			
			myCache(key, value, seconds = 3600 * 24) {
				let nowTime = Date.parse(new Date()) / 1000;
				if (key && value) {
					let expire = nowTime + Number(seconds);
					uni.setStorageSync(key,JSON.stringify(value) + '|' +expire)
					console.log('已经把' + key + '存入缓存,过期时间为' + expire)
				} else if (key && !value) {
					let val = uni.getStorageSync(key);
					if (val) {
						// 缓存存在，判断是否过期
						let temp = val.split('|')
						if (!temp[1] || temp[1] <= nowTime) {
							uni.removeStorageSync(key)
							console.log(key + '缓存已失效')
							// setTimeout(() => {
							// 	this.$refs.code.open();
							// }, 0)
							return '';
						} else {
							return JSON.parse(temp[0]);
						}
					}
				}
			},
			

			// 保存编辑
			saveEdit() {
				let data = {
					report_id: this.report_id,
					content: this.detail_.content,
					ending: this.detail_.ending,
					repair_record: this.detail_.repair_record
				}
				data[this.field] = this.editContent;
				this.$https.post('/warranty/seesignUpdate', data).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						success: () => {
							this.closeEdit();
							this.getdata();
						}
					})
				})
			},
			//设置canvas背景色  不设置  导出的canvas的背景为透明
			//@params：字符串  color
			setCanvasBg(color) {
				this.ctx.rect(0, 0, this.canvasWidth, this.canvasHeight - 4);
				this.ctx.setFillStyle(color);
				this.ctx.fill(); //设置填充
				this.ctx.draw(); //开画
			},
			/* 获取结单数据 */
			getdata() {
				this.$https.post('/warranty/seesign', {
					report_id: this.report_id
				}).then(res => {
					//contract_status 合同状态:0=技术保合同,1=无合同,2=标准:白金合同,3=单次合同 
					//service_type 服务类型:0=维修,1=保养,2=安装
					this.detail_ = res.data
					this.detail_.imageTex = res.data.imagess ? res.data.imagess.split(
						',') : [];
					this.detail_.contract_status = this.changeContract(this.detail_.contract_status)
					this.detail_.service_type = this.changeService(this.detail_.service_type)
					this.detail_.enclosure_picture = res.data.enclosure_picture ? res.data.enclosure_picture.split(
						',') : [];
					this.reportImg = res.data.report || '';
					let setData = this.detail_
					this.arrList = JSON.parse(this.detail_.report_other.column_json)
					this.typeData = this.detail_.pinpai.name
					this.service_default = this.detail_.report_other.type == 0 ? 'A级保养' : (this.detail_
						.report_other
						.type == 1 ? 'B级保养' : `${this.typeData}` + '保养')
					console.log(this.arrList, 'xxxxxx', this.service_default)
					this.setReportDetail(setData)
				})
			},
			/* 转化 合同状态  */
			changeContract(i) {
				// 6单次维修合同、5单次保养合同、4整机铂金保合同、3整机金保合同、2整机银保合同、1整机技术保合同、0无合同
				switch (i) {
					case '0':
						return '无合同';
					case '1':
						return '整机技术保合同';
					case '2':
						return '整机银保合同';
					case '3':
						return '整机金保合同';
					case '4':
						return '整机铂金保合同';
					case '5':
						return '单次保养合同';
					case '6':
						return '单次维修合同';
				}
			},
			/* 转换 服务类型 */
			changeService(i) {
				switch (i) {
					case '0':
						return '维修';
					case '1':
						return '保养';
					case '2':
						return '安装';
				}
			},
			reviewPdf(pdf) {
				console.log('pdf--------', pdf)
				if (!pdf) {
					uni.showToast({
						title: '暂未生成',
						icon: 'error'
					})
					return
				}
				if (!pdf.url) {
					uni.showToast({
						title: '请先提交！',
						icon: 'error'
					})
					return
				}

				setTimeout(() => {
					uni.showLoading({
						title: '加载中',
						duration: 2000
					});
				}, 100)
				setTimeout(() => {
					uni.getSystemInfo({
						success: res => {
							let that = this
							wx.downloadFile({
								url: pdf.url,
								filePath: '',
								success: res => {
									const filePath = res.filePath ||
										res.tempFilePath
									console.log(filePath)
									wx.openDocument({
										filePath: filePath,
										showMenu: true, // 显示右上角菜单
										fileType: 'pdf',
										success: () => {
											console.log(
												'打开文档成功'
											)
											uni.hideLoading();
										},
										fail: err => {
											console.log(
												`打开文档失败`,
												err)
										}
									})
								},
								fail: err => {
									console.log(`下载文档失败`, err)
								}
							})
						}
					});
				}, 0)
			},
			/* 提交 */
			async submit() {
				if (!this.detail_.image || !this.detail_.image1) {
					const img1 = await this.uploadImage(this.imgSrc1);
					const img2 = await this.uploadImage(this.imgSrc2);
					if (!img1) this.user_photo = '';
					if (!img2) this.user_photo2 = '';

					let data = {
						warranty_id: this.detail_.warranty_id, //	工单id
						service_id: this.service_id, //维修id
						report_id: this.report_id, //维修报告id
						image: img1 ? img1 : this.detail_.image,
						image1: img2 ? img2 : this.detail_.image1,
						user_photo: this.user_photo,
						user_photo2: this.user_photo2,
					}

					if (this.is_scan_code == 1) {
						data.is_scan_code = 1
						if (this.domId == 'handWriting2') {
							if (!img2) {
								data.user_phone = this.phone
								data.user_nickname = this.nickname
								data.avatar = this.avatarUrl
							} else {
								data.user_phone = this.phone
								data.user_nickname = this.nickname
								data.avatar = this.avatarUrl
								data.user_phone2 = this.phone
								data.user_nickname2 = this.nickname
								data.avatar2 = this.avatarUrl
							}

						} else if (this.domId == 'handWriting3') {
							if (!img1) {
								data.user_phone2 = this.phone
								data.user_nickname2 = this.nickname
								data.avatar2 = this.avatarUrl
							} else {
								data.user_phone = this.phone
								data.user_nickname = this.nickname
								data.avatar = this.avatarUrl
								data.user_phone2 = this.phone
								data.user_nickname2 = this.nickname
								data.avatar2 = this.avatarUrl
							}
						}
					}


					this.$https.post('/warranty/signature', data).then(res => {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							success: () => {
								this.getdata()
								setTimeout(() => {
									uni.navigateBack({
										delta: 1
									})
								}, 1000)
							}
						})
					})
				}
			},
			// 上传签名
			uploadImage(tempPath, addsy_txt = '') {
				return new Promise((resolve) => {
					if (!tempPath) return resolve('');
					const token = uni.getStorageSync('userInfo').token
					uni.uploadFile({
						url: `${baseUrl}api/common/upload`,
						filePath: tempPath,
						name: 'file',
						formData: {
							token: token,
							addsy_txt
						},
						success: (res1) => {
							let imgs = JSON.parse(res1.data).data.fullurl
							resolve(imgs)
						},
						fail: () => {
							uni.showToast({
								title: '上传失败',
								icon: 'error'
							})
						}
					});
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	button::after {
		border: none;
		padding-left: 0 !important;
	}

	.container {
		width: 100%;
		padding: 30px 30px 0;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		background-color: #fff;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;

		.title_t {
			display: flex;
			align-items: center;
			justify-content: flex-start;

			image {
				width: 70rpx;
				height: 50rpx;
				margin-right: 10rpx;
			}
		}

		.title_bold {
			font-weight: 600;
			height: 80rpx;
			font-size: 38rpx;
			line-height: 80rpx;
		}

		.title_small {
			font-family: Microsoft YaHei UI, Microsoft YaHei UI;
			font-weight: 400;
			font-size: 26rpx;
			width: 660rpx;
			color: #999999;
			margin-top: 50rpx;
			margin-bottom: 20rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
			border-bottom: 1px soild #F2F2F2;
		}

		.choose-avatar-row,
		.choose-nickname-row {
			height: 80rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 14px 2px;
			font-size: 28rpx;
			border-top: 1px solid #F2F2F2;
			border-bottom: 1px solid #F2F2F2;

			image {
				width: 14rpx;
				height: 24rpx;
			}

			.avatar-wrapper {
				width: 36px;
				height: 36px;
				margin: 0;
				padding: 0;
				margin-right: 0;

				.avatar {
					width: 100%;
					height: 100%;
				}
			}

			.avatar-wrapper2 {
				width: 540rpx;
				height: 34px;
				background-color: transparent;
			}
		}

		.choose-nickname-row {
			height: 80rpx;
			border-top: none;
			padding: 10px 2px;

			text {
				margin-right: 24rpx;
				color: #807E7E;
			}
		}
	}

	.login {
		width: 100%;

		&-btn {
			height: 96rpx;
			border-radius: 48rpx;
			font-size: 32rpx;
			line-height: 96rpx;
			color: #fff;
			background-color: #1A66FF;
			margin-top: 40rpx;
			margin-bottom: 40rpx;
		}

		&-btn::after {
			border: none;
		}

	}

	.submit {
		width: 36%;
		height: 78rpx;
		text-align: center;
		background-color: #FFFFFF;
		line-height: 78rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #000;
		border-radius: 60rpx;
		box-shadow: 0px 3px 6px 3px rgba(222, 222, 222, 0.3);
	}

	.cont_ {
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #969699;
		margin: 32rpx;
	}

	.sign_ture_engineer {
		width: 660rpx;
		height: 183rpx;
		text-align: center;
		background-color: #F5F6F8;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 550;
		line-height: 153rpx;
		font-family: "楷体";
		color: #000000;
		position: relative;

		.title {
			position: absolute;
			top: -26%;
			left: 2.2%;
			color: #999999;
			font-size: 26rpx;
			font-weight: 400;
			font-family: Source Han Sans CN-Regular;
		}
	}

	.sign_ture {
		// display: flex;
		// align-items: center;
		// justify-content: space-between;
		padding: 0 22rpx;
		margin-bottom: 30rpx;
		position: relative;
	}

	.sign_ture_user {
		width: 660rpx;
		height: 183rpx;
		background-color: #F5F6F8;
		margin-bottom: 16rpx;
		position: relative;

		.title {
			position: absolute;
			top: 5%;
			left: 2%;
			color: #999999;
			font-size: 26rpx;
		}

		.title2 {
			position: absolute;
			top: 38%;
			left: 28%;
			color: #999999;
			font-size: 26rpx;
		}
	}

	.sign {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 32rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #303030;
		padding: 0 32rpx;
	}

	.sign>view {
		text-align: center;
		margin: 30rpx 0;
	}

	.border_ {
		height: 2rpx;
		margin: 0 32rpx;
		background-color: #EBEEF1;
	}

	.btn {
		display: flex;
		align-items: center;
		background-color: #F5F6F8;
		justify-content: space-between;
	}

	.getPoster {
		margin: 15px 0;
		background: #1A66FF;
		color: #fff;
		padding: 5px;
		padding: 0 10px;
		border-radius: 60rpx;
		width: 55%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		box-shadow: 0px 2px 4px 2px rgba(26, 102, 255, 0.3);
	}

	.repair_main {
		margin: 20rpx;
		position: absolute;
		top: 9%;
		width: 94%;
		background-color: #fff;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.head_title {
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 600;
		color: #616161;
		line-height: 40rpx;
		background-color: #f7f8fb;
		text-align: center;
		position: relative;

		.creatBg {
			width: 100%;
			height: 210rpx;
		}

		.ele_icon {
			position: absolute;
			left: 10rpx;
			top: 0;
			margin-top: 10rpx;
			width: 108.6rpx;
			height: 74.7rpx;
		}

		.ele_icon2 {
			position: absolute;
			right: 10rpx;
			top: 10rpx;
			margin-top: 10rpx;
			width: 288.6rpx;
			height: 288.7rpx;
		}
	}

	.repair_title {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 12rpx 22rpx;
		font-size: 24rpx;
		margin: 36rpx 0 6rpx;
		width: 200rpx;
		border-top-right-radius: 30rpx;
		border-bottom-right-radius: 30rpx;
		background-color: #E3E3E3;
		font-family: PingFangSC-Regular, PingFang SC;
	}

	.same_ful {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 10rpx 22rpx;
		font-size: 24rpx;
		margin: 6rpx 0 6rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		letter-spacing: 2rpx;

		.ful_left {
			width: 30%;
			font-size: 28rpx;
			font-weight: 500;
			color: #2B2B2B;
			line-height: 33rpx;
		}

		.ful_right {
			width: 66%;
			border-bottom: 2rpx solid #EBEEF1;
			font-size: 28rpx;
			font-weight: 500;
			color: #000;
			padding: 14rpx 20rpx;
			line-height: 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}

	.title_ {
		font-size: 28rpx;
		background-image: url('../../static/bg_blue.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		width: auto;
		width: 190rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #fff;
		padding: 8rpx 30rpx;
		margin: 22rpx 0;
	}

	.content_ {
		padding: 0 32rpx 20rpx;

		.content_title {
			font-size: 24rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #969699;
		}

		.content_imgs {
			padding: 0;

			.two_left {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #000;
				margin-top: 10rpx;
			}

			image {
				width: 170rpx;
				height: 170rpx;
				margin-right: 10rpx;
				margin-top: 20rpx;

				&:last-child {
					margin-right: 0;
				}
			}
		}
	}

	.one_ {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 32rpx;
		margin: 16rpx 0 16rpx;

		.one_left {
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #969699;
		}

		.one_right {
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #000000;
		}
	}

	.two_ {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 0 32rpx;
		margin: 20rpx 0 20rpx;
		font-size: 24rpx;

		.two_left {
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #000;
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;

			.left_icon {
				width: 14rpx;
				height: 14rpx;
				margin-right: 14rpx;
				background: #1A66FF;
				border-radius: 50%;
			}
		}

		.two_right {
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #969699;
			word-wrap: break-word;
			padding-left: 14rpx;
		}
	}

	page {
		background: #fbfbfb;
		height: auto;
		overflow: hidden;
	}

	.wrapper {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		display: flex;
		align-content: center;
		flex-direction: row;
		justify-content: center;
		font-size: 28rpx;
		background-color: #fff
	}

	.handWriting {
		background: #fff;
		width: 100%;
		height: 95vh;
		z-index: 99 !important;
	}

	.Right {
		position: absolute;
		    left: 8.4%;
		    font-size: 57px;
		    top: 45%;
		    z-index: 10000000;
		    display: inline-flex;
		    align-items: center;
			.handTitle {
				transform: rotate(90deg);
				flex: 1;
				color: #b3b3b3;
			}
	}

	.handRight {
		display: inline-flex;
		align-items: center;
	}

	.handCenter {
		border: 4rpx dashed #e9e9e9;
		flex: 5;
		overflow: hidden;
		box-sizing: border-box;
		margin: 30rpx 0;
	}

	.handTitle {
		transform: rotate(90deg);
		flex: 1;
		color: #666;
	}

	.handBtn button {
		font-size: 28rpx;
	}

	.handBtn {
		height: 95vh;
		display: inline-flex;
		flex-direction: column;
		justify-content: space-between;
		align-content: space-between;
		flex: 1;
	}

	.closeBtn {
		position: absolute;
		top: 100rpx;
		left: 0rpx;
		transform: rotate(90deg);
		color: #666;
	}

	.delBtn {
		position: absolute;
		top: 250rpx;
		left: 0rpx;
		transform: rotate(90deg);
		color: #666;
	}

	.delBtn image {
		position: absolute;
		top: 13rpx;
		left: 25rpx;
	}

	.subBtn {
		position: absolute;
		bottom: 52rpx;
		left: -3rpx;
		display: inline-flex;
		transform: rotate(90deg);
		background: #008ef6;
		color: #fff;
		margin-bottom: 30rpx;
		text-align: center;
		justify-content: center;
	}

	.saveBtn {
		position: absolute;
		top: 375rpx;
		left: 0rpx;
		transform: rotate(90deg);
		color: #666;
	}

	.previewBtn {
		position: absolute;
		top: 500rpx;
		left: 0rpx;
		transform: rotate(90deg);
		color: #666;
	}

	.uploadBtn {
		position: absolute;
		top: 625rpx;
		left: 0rpx;
		transform: rotate(90deg);
		color: #666;
	}

	.black-select {
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		top: 30rpx;
		left: 25rpx;
	}

	.black-select.color_select {
		width: 90rpx;
		height: 90rpx;
		top: 100rpx;
		left: 10rpx;
	}

	.red-select {
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		top: 140rpx;
		left: 25rpx;
	}

	.red-select.color_select {
		width: 90rpx;
		height: 90rpx;
		top: 120rpx;
		left: 10rpx;
	}

	.popup-box {
		width: 750rpx;
		height: 100vh;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx;

		.popup-title {
			color: #909090;
			font-size: 32rpx;
			font-weight: 600;
			margin-bottom: 20rpx;
		}

		textarea {
			width: 100%;
			color: #303030
		}

		.popup-btn {

			button {

				margin-top: 20rpx;

				&:last-child {
					margin-right: 0;
				}
			}
		}

		.popup-btn2 {
			padding: 140rpx;

			button {

				margin-top: 20rpx;

				&:last-child {
					margin-top: 40rpx;
					color: #1aad19 // margin-right: 0;
				}
			}
		}
	}
</style>